<!-- 售后管理 -->
<template>
	<view class="">
		<u-navbar :is-back="true">
			<view class="flex-bettwen w100">
				<view class="fs34">售后管理</view>
				<view class="color-gray fs28 m-r30" @click="isShowSortTime = true">
					<text class="fs26 m-r10">筛选</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="bg-white padding20">
			<u-search placeholder="订单编号/退货单号/收货人搜索" v-model="keyword"></u-search>
		</view>
		
		<view class="bg-white flex-bettwen padding-lr30">
			<view class="tab-item p-b20 center color-gray " @click="current = index"
				:class="current == index?'tab-item-active':''" v-for="(item,index) in tabList" :key="index">
				<view class="fs26">{{item.text}}</view>
			</view>
		</view>
		
		<view class="padding30">
			<view class="m-b20 bg-white br16 padding20"  v-for="(item,index) in flowList" :key="index">
				<view class="fs26">
					<view class="m-b10" style="font-weight: bold;">申请退货退款/仅退货/换货</view>
					<view>申请时间：2023/07/22 12:13:02</view>
				</view>
				<view class="flex m-t20">
					<u-lazy-load image="/static/images/img-goods.jpg" :index="index"
						class="w-130 h-130 m-r20 br16"></u-lazy-load>
					<view class="flex flex1">
						<view class="flex1 flex-column-between" style="">
							<view class="text-overflow fs26">{{item.text}}</view>
							<view class="">
								<u-tag text="接受定做" mode="light" type="success" size="mini" class="m-r10"/>
								<u-tag text="48小时发货" mode="light" type="info" size="mini" class="m-r10" />
								<u-tag text="货到付款" mode="light" type="info" size="mini" />
							</view>
						</view>
					</view>
				</view>
				<view class="m-t20 fs26">
					<text class="color-gray ">类型：</text>
					<text>大货/散件/色卡</text>
				</view>
				
				<view class="bg-gray m-t20 flex-bettwen br12 color-item padding-lr20" v-for="(v,i) in 2" :key="i">
					<view class="flex-center">
						<image src="/static/images/colorboard.png" mode="" class="w-30 h-30 padding10 bg-white m-r20">
						</image>
						<text>2##</text>
					</view>
					<view class="">
						<text class="">￥34.00</text>
						<text class="color-gray">×1.0米</text>
					</view>
				</view>
				<view class="flex-bettwen m-t20">
					<text class="fs24 color-gray" @click="isShowMore = true">更多</text>
					<view class="">
						<u-button size="mini" plain class="m-r20" type="primary">联系买家</u-button>
						<u-button size="mini" plain type="error">同意申请</u-button>
					</view>
				</view>
			</view>
		</view>
		
			
		<!-- 时间筛选 -->
		<u-popup v-model="isShowMore" mode="bottom">
			<view class="padding30">
				<view class="center fs30 padding-tb20" @click="selectSortTime(item,index)" :class="currentMore == index?'color-blue':''" v-for="(item,index) in moreList" :key="index">{{item}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				keyword:'', // 搜索关键词
				current: 0,
				moreList:[
					'官方客服',
					'申请平台介入',
					'拒绝申请'
				],
				tabList: [{
					text: '全部',
					value: 34,
				}, {
					text: '待商家处理',
					value: 2,
				}, {
					text: '待买家处理',
					value: 0,
				}, {
					text: '客服介入中',
					value: 0,
				} ],
				flowList: [{
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: true,
					price: '10000',
					unit: '米'
				}, {
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: false,
					price: '20323',
					unit: '米'
				}, {
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: false,
					price: '10000',
					unit: '米'
				}, {
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: false,
					price: '7673',
					unit: '米'
				}, {
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: true,
					price: '2343',
					unit: '米'
				}, {
					text: '找(针织)面料，成分要求(80%棉20%涤)，幅宽(160cm)，克重(80g/m)，用作防晒衫，要求面料微透。',
					isDiy: true,
					price: '1123',
					unit: '米'
				}, ],
				isShowMore:false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-item {
		text-align: center;
		position: relative;
	
	}
	.tab-item-active {
		color: #269dd1;
	}
	
	.tab-item-active::after {
		position: absolute;
		content: "";
		display: block;
		width: 50rpx;
		height: 10rpx;
		background: #269dd1;
		left: 50%;
		bottom: 0;
		transform: translate(-50%);
	}
</style>